<template>
    <div class='menuItem' @click='toPage(linkUrl)' v-if="linkUrl =='/backlog'" style="position: relative">
        <div class='flex'>
            <img class="icon-img" :src="imgSrc">
            <!--<img class="back-img" :src="bcImgSrc" />-->
        </div>
        <p>{{menuTitle}} <font class="fontNum"   v-show="haveNew0">{{newListNum0}}</font></p>
    </div>
  <div class='menuItem' @click='toPage(linkUrl)' v-else-if="linkUrl =='/message'" style="position: relative">
    <div class='flex'>
      <img class="icon-img" :src="imgSrc">
     <!-- <img class="back-img" :src="bcImgSrc" />-->
    </div>
    <p>{{menuTitle}} <font class="fontNum"  v-show="haveNew1">{{newListNum1}}</font></p>
  </div>
    <div class='menuItem' @click='toPage(linkUrl)' v-else-if="linkUrl =='/targetManage'" style="position: relative">
        <div class='flex'>
            <img class="icon-img" :src="imgSrc">
           <!-- <img class="back-img" :src="bcImgSrc" />-->
        </div>
        <p>{{menuTitle}} <font class="fontNum"  v-show="haveNew2">{{newListNum2}}</font></p>
    </div>
    <div class='menuItem' @click='toPage(linkUrl)' v-else-if="linkUrl =='/remind'" style="position: relative">
        <div class='flex'>
            <img class="icon-img" :src="imgSrc">
            <!--<img class="back-img" :src="bcImgSrc" />-->
        </div>
        <p>{{menuTitle}} <font class="fontNum"  v-show="haveNew3">{{newListNum3}}</font></p>
    </div>
    <div class='menuItem' @click='toPage(linkUrl)' v-else-if="linkUrl =='/evaluateAssess'" style="position: relative">
        <div class='flex'>
            <img class="icon-img" :src="imgSrc">
            <img class="back-img" :src="bcImgSrc" />
        </div>
        <p>{{menuTitle}} <font class="fontNum"  v-show="haveNew4">{{newListNum4}}</font></p>
    </div>
    <div class='menuItem' @click='toPage(linkUrl)' v-else-if="linkUrl =='/competencyAssess'" style="position: relative">
        <div class='flex'>
            <img class="icon-img" :src="imgSrc">
            <img class="back-img" :src="bcImgSrc" />
        </div>
        <p>{{menuTitle}} <font class="fontNum"  v-show="haveNew5">{{newListNum5}}</font></p>
    </div>
    <div class='menuItem' @click='toPage(linkUrl)' v-else-if="linkUrl =='/myHoner'" style="position: relative">
        <div class='flex'>
            <img class="icon-img" :src="imgSrc">
           <!-- <img class="back-img" :src="bcImgSrc" />-->
        </div>
        <p>{{menuTitle}}</p>
    </div>
    <div class='menuItem' @click='toPage(linkUrl)' v-else>
      <div class='flex'>
        <img class="icon-img" :src="imgSrc">
         <!-- <img class="back-img" :src="bcImgSrc" />-->
      </div>
      <p>{{menuTitle}}</p>
    </div>

</template>

<script>
  import {getStore} from '@/assets/config/mUtils';
  import {taskDatas,queryMessageList,indexCount} from '@/service/getData';
    export default {
    	data(){
            return{
              haveNew0:false,
              haveNew1:false,
              haveNew2:false,
              haveNew3:false,
              haveNew4:false,
              haveNew5:false,
              newListNum0:0,
              newListNum1:0,
              newListNum2:0,
              newListNum3:0,
              newListNum4:0,
              newListNum5:0,
              show:false,
              username:"",
              password:"",
            }
        },
        props: ['imgSrc', 'menuTitle','linkUrl',"bcImgSrc"],
        mounted(){
            if(this.linkUrl =='/backlog'){
//               var data ={};
//               data.app_userId = getStore('user_id');
//               data.CHECK_TIME = new Date().getTime().toString();
//               data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
// 	            indexCount('/api/appCzbeva/queryAppSelfIndexSysTaskCount',data).then(res=>{
// 		            var total = res.data.count;
// 		            if(total>0){
// 			            this.haveNew0 = true;
// 			            this.newListNum0 = total;
// 		            }
// 	            })
//              taskDatas(data).then(res=>{
////                this.remainData = res.data.data;
//                console.log(res);
//                var total = res.data.total;
//                if(total>0){
//                  this.haveNew = true;
//                  this.newListNum = total;
//                }
//              })
            }else if(this.linkUrl =='/message'){
//               var data ={};
//               data.app_userId = getStore('user_id');
//               data.CHECK_TIME = new Date().getTime().toString();
//               data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
// 	            indexCount('/api/appCzbeva/queryAppSelfIndexInformationCount',data).then(res=>{
// 		            var total = res.data.count;
// 		            if(total>0){
// 			            this.haveNew1 = true;
// 			            this.newListNum1= total;
// 		            }
// 	            })
            }else if(this.linkUrl =='/targetManage'){
// 	            var data ={};
// 	            data.app_userId = getStore('user_id');
// 	            data.CHECK_TIME = new Date().getTime().toString();
// 	            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
// 	            indexCount('/api/appCzbeva/queryAppSelfIndexAnnualworkCount',data).then(res=>{
// 		            var total = res.data.count;
// 		            if(total>0){
// 			            this.haveNew2 = true;
// 			            this.newListNum2= total;
// 		            }
// 	            })
            }else if(this.linkUrl =='/remind'){
//	            var data ={};
//	            data.app_userId = getStore('user_id');
//	            data.CHECK_TIME = new Date().getTime().toString();
//	            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
//	            indexCount('/api/appCzbeva/queryAppSelfIndexRemindCount',data).then(res=>{
//		            var total = res.data.count;
//		            if(total>0){
//			            this.haveNew3 = true;
//			            this.newListNum3= total;
//		            }
//	            })
            }else if(this.linkUrl =='/evaluateAssess'){
// 	            var data ={};
// 	            data.app_userId = getStore('user_id');
// 	            data.CHECK_TIME = new Date().getTime().toString();
// 	            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
// 	            indexCount('/api/appCzbeva/queryAppSelfIndexCzbevaPlanCount',data).then(res=>{
// 		            var total = res.data.count;
// 		            if(total>0){
// 			            this.haveNew4 = true;
// 			            this.newListNum4= total;
// 		            }
// 	            })
            }else if(this.linkUrl =='/competencyAssess'){
// 	            var data ={};
// 	            data.app_userId = getStore('user_id');
// 	            data.CHECK_TIME = new Date().getTime().toString();
// 	            data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
// 	            indexCount('/api/appCzbeva/queryAppSelfIndexCzbevaPlanSrlCount',data).then(res=>{
// 		            var total = res.data.count;
// 		            if(total>0){
// 			            this.haveNew5 = true;
// 			            this.newListNum5= total;
// 		            }
// 	            })
            }
          },
        methods:{
            toPage(linkUrl){
                this.$router.push({
                  path: linkUrl,
                })
            },
        },
        getCount(url){
	        var data ={};
	        data.app_userId = getStore('user_id');
	        data.CHECK_TIME = new Date().getTime().toString();
	        data.CHECK_SIGN = this.$md5(data.app_userId + data.CHECK_TIME +"3a28fba00c015e0df7f88556c91cb7fc");
	        indexCount(url,data).then(res=>{

            })
        }
    }

</script>

<style lang="scss" scoped>
    @import '../../assets/style/mixin';
    @import '../../assets/style/public';
    .menuItem{
         cursor: pointer;
         padding-bottom: 0.6rem;
        z-index: 1;
        background: #fff;
        >.flex{
             @include wh(100%, 2.7rem);
             align-items:center;
             justify-content:center;
            position: relative;
            .back-img {
                width: 2.4rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
            .icon-img {
                width: 1.5rem;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                z-index: 99;
            }
        }
        p{
             @include sc(.56rem, #333);
             text-align:center;
          }
    }
    .menuItem:nth-last-of-type(1){
        background: transparent;
    }
  .backLog{
    position: absolute;
    width: 1rem;
    height: 1rem;
    right: 0;
    top: 0;
    background: #007aff;
    border-radius: 50%;
    font-size: .8rem;
    line-height: 1rem;
    text-align: center;
    color: #fff;
  }
    .fontNum{
        font-size: 0.5rem;
        position: absolute;
        top: -0.05rem;
        right: 0.4rem;
        background: red;
        color: #fff;
        border-radius: 50%;
        padding: 0.1rem;
        min-width: 0.6rem;
        height: 0.6rem;
        line-height: 0.6rem;
        text-align: center;
        z-index: 101;
    }
</style>
